import React, { lazy, Suspense } from "react";
import { useRoutes } from "react-router-dom";
const Layout = lazy(() => import("../layout"));
const Home = lazy(() => import("../views/home"));
const Login = lazy(() => import("../views/login"));
const ListAdd = lazy(() => import("../views/listAdd"));
const ListManage = lazy(() => import("../views/listManage"));
const UserAdd = lazy(() => import("../views/userAdd"));
const UserManage = lazy(() => import("../views/userManage"));
const Set = lazy(() => import("../views/set"));
export const menu_routes = [
  {
    path: "/",
    element: <Home></Home>,
    meta: {
      title: "首页",
      role: ["user", "admin"],
    },
  },
  {
    path: "/list/add",
    element: <ListAdd></ListAdd>,
    meta: {
      title: "列表添加",
      role: ["user", "admin"],
    },
  },
  {
    path: "/list/manage",
    element: <ListManage></ListManage>,
    meta: {
      title: "列表管理",
      role: ["user", "admin"],
    },
  },
  {
    path: "/user/add",
    element: <UserAdd></UserAdd>,
    meta: {
      title: "用户添加",
      role: ["admin"],
    },
  },
  {
    path: "/user/manage",
    element: <UserManage></UserManage>,
    meta: {
      title: "用户管理",
      role: ["admin"],
    },
  },
  {
    path: "/set",
    element: <Set></Set>,
    meta: {
      title: "设置",
      role: ["admin"],
    },
  },
];
// 一级
const routes = [
  {
    path: "/",
    element: <Layout></Layout>,
    children: menu_routes,
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
];

const RouterView = () => useRoutes(routes);
const Router = () => {
  return (
    <Suspense fallback="路由加载中。。。">
      <RouterView></RouterView>
    </Suspense>
  );
};

export default Router;
